
import React, { useState, useEffect } from 'react';
import { Tabs, Card } from 'antd';
import styles from './index.less';
import { useInViewport } from '@umijs/hooks';
import Totalcompensation from './components/Totalcompensation'
import Compensationlist from './components/Compensationlist'
import PayDetail from './components/PayDetail'
import CostAnaysis from './components/CostAnaysis'
import BagReport from './components/BagReport'
import AuthComponent from '@/components/Authorized/AuthComponent';

const { TabPane } = Tabs;

export default () => {

  const [activeKey, setActiveKey] = useState('1');
  // 保存已经加载的tab-key，用于业务页面的缓存。
  const [loadedkey, setLoadedkey] = useState('1');
  // 用于重置缓存页面的tab选中状态
  const inViewPort = useInViewport(() => document.querySelector('#pageViewId'));

  useEffect(() => {
    if (AuthComponent.getAuth('banksearchSystem.totalcompensation.view')) {
      setActiveKey('1')
      setLoadedkey('1')
    } else if (AuthComponent.getAuth('banksearchSystem.compensationlist.view')) {
      setActiveKey('2')
      setLoadedkey('2')
    } else if (AuthComponent.getAuth('banksearchSystem.costAnaysis.view')) {
      setActiveKey('3')
      setLoadedkey('3')
    } else if (AuthComponent.getAuth('banksearchSystem.payDetail.view')) {
      setActiveKey('4')
      setLoadedkey('4')
    } else if (AuthComponent.getAuth('banksearchSystem.BagReport.view')) {
      setActiveKey('5')
      setLoadedkey('5')
    }
  }, []);

  return (
    <Card id="pageViewId" className={styles.charts}>
      <Tabs defaultActiveKey="1" onChange={(key) => {
        setActiveKey(key);
        setLoadedkey(loadedkey + key);
      }}>
        {AuthComponent.getAuth('banksearchSystem.totalcompensation.view') && <TabPane tab="补偿合计表" key="1">
          {loadedkey.indexOf('1') > -1 ? <Totalcompensation /> : null}
        </TabPane>}
        {AuthComponent.getAuth('banksearchSystem.compensationlist.view') && <TabPane tab="补偿明细表" key="2">
          {loadedkey.indexOf('2') > -1 ? <Compensationlist /> : null}
        </TabPane>}
        {AuthComponent.getAuth('banksearchSystem.costAnaysis.view') && <TabPane tab="成本分析表" key="3">
          {loadedkey.indexOf('3') > -1 ? <CostAnaysis /> : null}
        </TabPane>}
        {AuthComponent.getAuth('banksearchSystem.payDetail.view') && <TabPane tab='支付明细表' key="4">
          {loadedkey.indexOf('4') > -1 ? <PayDetail /> : null}
        </TabPane>}
        {AuthComponent.getAuth('banksearchSystem.BagReport.view') && <TabPane tab='箱包报表' key="5">
          {loadedkey.indexOf('5') > -1 ? <BagReport /> : null}
        </TabPane>}
        {/* {
          AuthComponent.getAuth('luggageCharts.totalCompensation.list')
            ? <TabPane tab="补偿合计表" key="1">
              {loadedkey.indexOf('1') > -1 ? <Totalcompensation /> : null}
            </TabPane>
            : null
        }
        {
          AuthComponent.getAuth('luggageCharts.compensationlist.list')
            ? <TabPane tab="补偿明细表" key="2">
              {loadedkey.indexOf('2') > -1 ? <Compensationlist /> : null}
            </TabPane>
            : null
        }
        {
          AuthComponent.getAuth('luggageCharts.cost.list')
            ? <TabPane tab="成本分析表" key="3">
              {loadedkey.indexOf('3') > -1 ? <CostAnaysis /> : null}
            </TabPane>
            : null
        }
        {
          AuthComponent.getAuth('luggageCharts.payDetail.list')
            ? <TabPane tab='支付明细表' key="4">
              {loadedkey.indexOf('4') > -1 ? <PayDetail /> : null}
            </TabPane>
            : null
        } */}
      </Tabs>
    </Card>
  );
};
